/* eslint-disable no-unused-vars */
import React, { useState, useEffect } from "react";
import { Button, Drawer } from "antd";
import {
  LightFilter,
  ProForm,
  ProFormSwitch,
  ProFormText,
  ProFormDigit,
  ProFormSelect,
  ProFormDependency,
  ProFormSlider,
  ProFormList,
} from "@ant-design/pro-components";
import { RollbackOutlined } from "@ant-design/icons";

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

function SubmitConfig({ submitconfig, setSubmitconfig }) {
  const { config, result } = submitconfig;
  const [drawer, setDrawer] = useState({
    open: false,
    closeable: false,
  });

  useEffect(() => {
    setSubmitconfig((s) => {
      return { ...s.submitconfig };
    });
  }, []);

  useEffect(() => {
    if (result.code) {
      setDrawer((s) => ({
        ...s,
        open: true,
      }));
    } else {
      setDrawer((s) => ({
        ...s,
        open: false,
      }));
    }
  }, [result]);

  return (
    <div
      id="pop"
      style={{
        height: 500,
        overflow: "hidden",
        position: "relative",
        paddingTop: 12,
      }}
    >
      <Drawer
        {...drawer}
        rootStyle={{ position: "absolute" }}
        width={"100%"}
        getContainer={() => document.getElementById("pop")}
        closable={false}
        mask={false}
        onClose={() => {
          setSubmitconfig((s) => {
            return { ...s.submitconfig, result: {} };
          });
        }}
      >
        <div className="spread">
          <span>接口调用结果</span>
          <Button
            size="small"
            type="text"
            onClick={() => {
              setSubmitconfig((s) => {
                return { ...s.submitconfig, result: {} };
              });
            }}
            icon={<RollbackOutlined />}
          ></Button>
        </div>
        <div
          style={{
            whiteSpace: "pre-wrap",
            backgroundColor: "#fff",
            borderRadius: 6,
            margin: "8px 0",
            fontSize: 10,
          }}
        >
          {JSON.stringify(result, 0, 4)}
        </div>
      </Drawer>
      <ProForm
        submitter={false}
        layout="horizontal"
        size="small"
        variant="filled"
        {...layout}
        onValuesChange={(val, allval) => {
          //   let res = { ...allval, name: allval.name || "s" };
          //   if (Object.keys(val).includes("required")) {
          //     res.rules = val.required
          //       ? [
          //           ...(res.rules || []),
          //           {
          //             required: true,
          //             message: `${allval.label}为必填项`,
          //           },
          //         ]
          //       : res.rules.filter((it) => !it.required);
          //   } else {
          //   }
          //   handleChange(res);
        }}
      >
        <ProFormText
          name="baseUrl"
          colon={false}
          labelAlign="left"
          label="服务地址"
          rules={[{ required: true, message: "" }]}
        />
        <ProFormText
          name="path"
          colon={false}
          labelAlign="left"
          label="接口路径"
          rules={[{ required: true, message: "" }]}
        />
        <ProFormSelect
          name="required"
          colon={false}
          labelAlign="left"
          label="请求方式"
          options={[
            "GET",
            "POST",
            "PUT",
            "DELETE",
            "PATCH",
            "HEAD",
            "OPTIONS",
            "TRACE",
          ]?.map((it) => ({
            label: it,
            value: it,
          }))}
          rules={[{ required: true, message: "" }]}
        />
      </ProForm>
    </div>
  );
}

export default SubmitConfig;
